<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="何毓堂">
    <title></title>
    <link rel="stylesheet" type="" href="">
    <style>
        * {
            box-sizing: border-box;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .slideshow {
            width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .indicator {
            width: 300px;
            display: flex;
            margin-top: -50px;
            margin-left: 50px;
        }

        .indicator li {
            width: 30px;
            height: 30px;
            line-height: 30px;
            background-color: hotpink;
            border-radius: 50%;
            color: aqua;
            margin-right: 6px;
        }

        .img-click {
            margin-top: -35px;
            margin-left: 600px;
        }

        .img-click span {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: rgba(0, 0, 0, 1);
            color: #ffffff;
        }

        .indicator .active {
            background-color: blue;
        }
    </style>
</head>

<body>

    <div class="slideshow">
        <ul class="img-list">
            <li class="current"><a href="#"><img src="京东图片\01.jpg" alt=""></a></li>
            <li><a href="#"><img src="京东图片\02.jpg" alt=""></a></li>
            <li><a href="#"><img src="京东图片\03.jpg" alt=""></a></li>
            <li><a href="#"><img src="京东图片\04.jpg" alt=""></a></li>
            <li><a href="#"><img src="京东图片\05.jpg" alt=""></a></li>
            <li><a href="#"><img src="京东图片\06.jpg" alt=""></a></li>
            <li><a href="#"><img src="京东图片\07.jpg" alt=""></a></li>
            <li><a href="#"><img src="京东图片\08.jpg" alt=""></a></li>
        </ul>
        <ul class="indicator">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>

    </div>

    <script src="./jquery.js"></script>
</body>


</html>
<script>
    $('.img-list .current').show()
        .siblings().hide();
     
    $(function () {

        var index = 0;
        var timer = setInterval(function () {
            index++;
            if (index == 9) {
                index = 0;
            }
            $('.img-list').find('li').eq(index).show()
                .siblings().hide();

            $('.indicator').find('li').eq(index).addClass('active')
                .siblings().removeClass('active');

        }, 1000)

        $('.indicator li').hover(function () {
            clearInterval(timer);
            timer = null;
            $(this).addClass('active')
                .siblings().removeClass('active');
            $('.img-list li').eq($(this).index()).show()
                .siblings().hide();
        }, function () {
            timer = setInterval(function () {
                index++;
                if (index == 9) {
                    index = 0;
                }
                $('.img-list').find('li').eq(index).show()
                    .siblings().hide();

            }, 1000)
        })


       
        $('.prev').click(function () {
            clearInterval(timer);
            timer = null;
            index = index == 0 ? $('.img-list li').length - 1 : index - 1
             if (index == 9) {
                index = 0;
            }
            $('.img-list').find('li').eq(index).show()
                .siblings().hide();

            $('.indicator').find('li').eq(index).addClass('active')
                .siblings().removeClass('active');
        })
     
        $('.next').click(function () {
            clearInterval(timer);
            timer = null;
            index = index == ('.img-list li').length - 1 ? 0 : index + 1;
           if (index == 9) {
                index = 0;
            }
            $('.img-list').find('li').eq(index).show()
                .siblings().hide();

            $('.indicator').find('li').eq(index).addClass('active')
                .siblings().removeClass('active');
        })

        $('.img-list').hover(function(){
             clearInterval(timer);
            timer = null;
        }, function () {
            timer = setInterval(function () {
                index++;
                if (index == 6) {
                    index = 0;
                }
                $('.img-list').find('li').eq(index).show()
                .siblings().hide();

            $('.indicator').find('li').eq(index).addClass('active')
                .siblings().removeClass('active');
            }, 1000)
        })

    })

</script>